<template>
	<view class="special">
		<view class="special_top">
			<image src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/teyue.jpeg" class="special_img"></image>
		    <view>特约</view>
		</view>
		<view class="special_bottom">
			<view class="special_bottom_title">专栏文章</view>
			<view class="special_bottom_list">
				<view class="special_bottom_list_item" @click="natTo('/pages/information/recommend',item)" v-for="(item,index) in list" :key="index">
					{{item.recommendedTitle}}
				</view>
				<!-- <view class="special_bottom_list_item">
					1.“八卦”的起源,到底是什么? 
				</view>
				<view class="special_bottom_list_item">
					2.关于八卦符号及史前研究问题
				</view>
				<view class="special_bottom_list_item">
					3.后天八卦存在了两大历史性的问题 
				</view>
				<view class="special_bottom_list_item">
					4.阴阳“八卦”的演变及阴阳家与《周易》的关系
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export  default{
		data(){
			return{
				list:[]
			}
		},
		onLoad(){
			this.getList()
		},
		methods:{
			getList(){
				let param = {};
				param.url = 'v3/consult/front/recommended/list';
				param.data = {};
				param.data.pageSize = 10;
				param.data.current = 1;
				this.$request(param).then(res => {
					if (res.state == 200) {
						this.list = res.data.list
					}
				})
			},
			natTo(url,item){
				// 要传递的对象参数
				const obj = {
					recommendedId:item.recommendedId
				}
				
				// 将对象参数转为JSON字符串，并使用encodeURIComponent编码
				const params = encodeURIComponent(JSON.stringify(obj));
				
				// 跳转页面并传递对象参数
				uni.navigateTo({
				   url: `${url}?params=${params}`
				});
			},
		}
	}
</script>

<style lang="scss">
	.special_img{
		width: 750rpx;
		height: 340rpx;
	}
	.special_top{
		background-color: #fff;
		font-size: 26rpx;
		padding-bottom: 16rpx;
		margin-bottom: 18rpx;
		& view{
			padding-left: 60rpx;
			padding-top: 12rpx;
		}
	}
	
	.special_bottom{
		padding: 18rpx 32rpx 18rpx 32rpx;
		background-color: #fff;
	}
	.special_bottom_title{
		font-size: 32rpx;
		padding-bottom: 8rpx;
		border-bottom: 2rpx solid #fbfbfb;
	}
	.special_bottom_list{
		.special_bottom_list_item{
			font-size: 24rpx;
			padding: 20rpx 0;
			border-bottom: 2rpx solid #fbfbfb;
		}
	}
</style>